/**
 * Icon
 * @author: tongsitong
 */

import styled from "styled-components";
import MagnifyGlassIcon from "@/assets/icons/icon-search.png";
import RedPlusIcon from "@/assets/icons/icon-comment-add.png";
import RedDownArrowIcon from "@/assets/icons/icon-download-red.png";
import DownImageIcon from "@/assets/icons/icon_download_img.png";
import icon_delete_2 from "@/assets/icons/icon-delete-2.png";
import styles from "./index.less";

export { icon_delete_2 };

// 删除icon
export const IconDelete = (props: any) => (
  <img
    onClick={props.onClick}
    className={styles.cursor}
    style={{ width: 14, height: 14 }}
    src={icon_delete_2}
    alt="delete"
  />
);

// 放大镜
export const MagnifyGlass = styled.i`
  display: inline-block;
  background-position: center;
  background-size: 14px 14px;
  background-image: url(${MagnifyGlassIcon});
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  line-height: 20px;
  border-radius: 2px;
  border: none;
`;

// 红色加号
export const RedPlus = styled.i`
  background-image: url(${RedPlusIcon});
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 4px;
`;

// 导出图片向下箭头
export const RedDownArrow = styled.i`
  background-image: url(${RedDownArrowIcon});
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 14px;
  height: 15px;
  display: inline-block;
  margin-right: 4px;
`;

// 保存
export const DownImage = styled.i`
  background-image: url(${DownImageIcon});
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 4px;
`;
